<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/excel.js"></script>
	<script src="js/echarts.js"></script>
    <style>
        .main {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        $(document).ready(function () {
            $(".img1").hover(function () {
                $(".img1").attr("src", "resource/export-2.png");
            }, function () {
                $(".img1").attr("src", "resource/export-1.png");
            });
        });
    </script>


<body>
<div class="main">
    <div class="heading1">
        消费分析
    </div>
    <div style="width: 80px;height: 30px;float:right;margin-right: 100px;">
        <img class="img1" src="resource/export-1.png" alt="" style="width: 100%;height: 100%;CURSOR: pointer"
             onclick="tableToExcel()"></div>
    <div class="section1">
		<div class="heading2">
            页面访问量：
        </div>
			<div id="chart2" style="width: 400px;height: 400px;top: 50px;left: 120px;"></div>
    </div>

    <div class="section2">
        <div class="heading2">
            总消费金额：
        </div>
        <div style="width: 100px;height: 100px;font-size: 50px;font-family: Microsoft YaHei UI;color: #47bde1;margin-left: 30px;margin-top: 25px"
             id="total">
            651654
        </div>
    </div>
    <div class="section5">
		<div id="chart1" style="width: 350px;height: 350px;top: 10px;"></div>
    </div>

</div>
</body>
	
<script>
    var chart1 = echarts.init(document.getElementById("chart1"));

    // 指定图表的配置项和数据
    var option = {

        // 图例
        legend: [{
            selectedMode:true,             // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
            top: '10%',
            left: 'center',
            textStyle: {                      // 图例的公用文本样式。
                fontSize: 10,
                color: '#000'
            },
            data: ["低消费", "中消费","高消费"]
        }],

        // 提示框
        tooltip: {
            show: true,                 // 是否显示提示框
            formatter: '{b} </br> 量{c} </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
        },

        // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        graphic: {
            type: 'text',               // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            top: 'center',              // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
            left: 'center',             // 同上
            style: {
                text: '消费水平',       // 文本块文字。可以使用 \n 来换行。[ default: '' ]
                fill: '#000',           // 填充色。
                fontSize: 12,           // 字体大小
                fontWeight: 'bold'		// 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
            }
        },

        // 系列列表
        series: [{
            name: '圆环图系列名称',         // 系列名称
            type: 'pie',                    // 系列类型
            center:['50%','50%'],           // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ['30%', '45%'],         // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
            hoverAnimation: true,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
            label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
                normal: {
                    show: true,             // 是否显示标签[ default: false ]
                    position: 'outside',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                    formatter: '{b} : {c}件'  // 标签内容
                }
            },
            labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
                normal: {
                    show: true,             // 是否显示视觉引导线。
                    length: 15,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                    length2: 10,            // 视觉引导项第二段的长度。
                    lineStyle: {            // 视觉引导线的样式
                        //color: '#000',
                        //width: 1
                    }
                }
            },
            data: [{"name":"低消费","value":100},{"name":"中消费","value":298},{"name":"高消费","value":34}]                      // 系列中的数据内容数组。
        }]
    };
    // 使用刚指定的配置项和数据显示图表
    chart1.setOption(option)
</script>
	<script>
    var chart2 = echarts.init(document.getElementById("chart2"));

    // 指定图表的配置项和数据
    option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['访问量']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1','2','3','4']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'访问量',
            type:'bar',
            data:[50, 10,7, 23],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
    ]
};
                    
    // 使用刚指定的配置项和数据显示图表
    chart2.setOption(option)
</script>
</html>